<template>
  <div id="answerResultPage">
    <h1>测评结果</h1>

    <div class="answerResultWrapper">
      <div class="ids">
        <div>回答 id: {{ id }}</div>
        <div>结果 id: {{ answerResult.resultId }}</div>
        <div>应用 id: {{ answerResult.appId }}</div>
      </div>
  
      <div class="resultPictureWrapper" v-if="answerResult.resultPicture">
        <img :src="answerResult.resultPicture" />
      </div>
  
      <div class="userInfo">
        <el-avatar :src="answerResult.user?.userAvatar" class="avatar" />
        <div>{{ answerResult.user?.userName }}</div>
      </div>
      <el-descriptions :column="1">
        <el-descriptions-item label="结果名称">{{ answerResult.resultName }}</el-descriptions-item>
        <el-descriptions-item label="结果描述">{{ answerResult.resultDesc }}</el-descriptions-item>
        <el-descriptions-item v-if="answerResult.resultScore" label="结果得分">{{ answerResult.resultScore }}</el-descriptions-item>
        <el-descriptions-item label="我的回答">{{ answerResult.choices }}</el-descriptions-item>
        <el-descriptions-item label="回答时间">{{ answerResult.createTime }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="buttonWrapper">
      <el-button type="info" @click="router.push('/')">返回首页</el-button>
      <el-button :icon="Share" type="success" @click="doShare">分享</el-button>
      <el-button type="primary" @click="redo">再做一次</el-button>
    </div>
  </div>

  <ShareDialog ref="shareDialog" :image-url="shareUrl"/>
</template>

<script setup lang="ts">
import { getUserAnswerVoByIdUsingGet } from '@/api/userAnswerController';
import ShareDialog from '@/components/ShareDialog.vue';
import { ResponseCodeEnum, ScoringStrategyEnum, ScoringStrategyEnumMap } from '@/enums';
import { Share } from '@element-plus/icons-vue';
import { ElLoading, ElMessage } from 'element-plus';
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 答案 id
const { id } = defineProps(["id"])

// 评分结果数据
const answerResult = ref<API.UserAnswerVO>({});

/**
 * 再做一次
 */
const redo = () => {
  router.push({
    name: '答题',
    params: {
      appId: answerResult.value?.appId
    }
  });
}

// 获取结果信息
onMounted(async () => {
  // 为表单添加加载效果
  const loading = ElLoading.service({
    // target 用 css 选择器即可
    target: ".answerResultWrapper",
    lock: true,
    text: "加载中...",
  });

  const result = await getUserAnswerVoByIdUsingGet({ id });

  if (result.data.code === ResponseCodeEnum.SUCCESS) {
    answerResult.value = result.data.data as any;
  } else {
    ElMessage.error("获取数据失败: " + result.data.message);
  }

  loading.close();
})

// 分享按钮
const shareDialog = ref()

// 分享链接
const shareUrl = computed(() => `${window.location.href}`)

/**
 * 打开分享 dialog
 */
const doShare = () => {
  shareDialog.value.openDialog()
}
</script>

<style scoped lang="less">
#answerResultPage {
  padding: 20px;
  width: 40%;
  border: 1px solid rgb(220, 223, 230);
  margin: 20px auto;

  .ids {
    color: rgb(153, 153, 153);
    font-size: 12px;

    div {
      margin: 5px 0;
    }
  }

  .userInfo {
    display: flex;
    align-items: center;
    margin: 10px auto;

    .avatar {
      margin-right: 10px;
    }
  }

  .resultPictureWrapper {
    width: 50%;
    margin: 20px auto;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>